<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>电影管理</el-breadcrumb-item>
      <el-breadcrumb-item>电影列表</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 分割线 -->
    <el-divider></el-divider>

    <!-- 模糊搜索的表单 -->
    <el-form 
      @submit.native.prevent
      :inline="true" class="demo-form-inline">
      <el-form-item label="电影名称">
        <el-input 
          @keyup.native.enter="search"
          v-model="name" placeholder="请输入电影名称关键字"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search">查询</el-button>
      </el-form-item>
    </el-form>

    <el-divider content-position="left">电影列表</el-divider>

    <!-- 电影列表 -->
    <el-table :data="moviesData.result">
      <el-table-column align="center" label="封面" width="100px">
        <template slot-scope="scope">
          <img :src="scope.row.cover" alt="" width="60px">
        </template>
      </el-table-column>
      <el-table-column align="center" label="标题" prop="title"></el-table-column>
      <el-table-column align="center" label="主演" prop="star_actor" width="240px"></el-table-column>
      <el-table-column align="center" label="上映时间" prop="showingon" width="100px"></el-table-column>
      <el-table-column align="center" label="时长" width="100px">
        <template slot-scope="scope">
          {{scope.row.duration}} 分钟
        </template>
      </el-table-column>
      <el-table-column align="center" label="电影类别" prop="type" width="150px"></el-table-column>
      <el-table-column align="center" label="操作" width="230">
        <template slot-scope="scope">
          <el-button size="small" type="info" icon="el-icon-user-solid" circle></el-button>
          <el-button size="small" type="success" icon="el-icon-picture-outline" circle></el-button>
          <el-button 
            @click="$router.push(`/home/movie-update/${scope.row.id}`)"
            size="small" type="warning" icon="el-icon-edit" circle></el-button>
          <el-button 
            @click="deleteItem(scope.row.id)"
            size="small" type="danger" icon="el-icon-delete" circle></el-button>
        </template>
      </el-table-column>
    </el-table>
    
    <!-- 分页器 -->
    <br>
    <el-pagination
      background
      :page-size="moviesData.pagesize"
      :total="moviesData.total"
      @current-change="changeCurrentPage"
      layout="->, prev, pager, next, total, jumper">
    </el-pagination>

  </div>
</template>

<script>
import httpApi from '@/http';

export default {
  data() {
    return {
      name: '',
      moviesData : {   // 存储电影列表相关信息
        page: 1,       // 当前页
        pagesize: 3,   // 每页多少条
        total: 0,      // 总条目数
        result: [],    // 存储具体电影列表
      }, 
    }
  },
  methods: {

    /** 删除电影列表项 */
    deleteItem(id){
      this.$confirm('此操作将永久删除该电影, 是否继续?', '提示', {
        confirmButtonText: '残忍删除',
        cancelButtonText: '我再想想',
        type: 'warning'
      }).then(res=>{
        httpApi.MovieApi.delete({id}).then(res=>{
          console.log('删除电影', res)
          // 提示用户，删除成功
          this.$message({message:'删除操作完成', type:'success'})
          // 重新刷新列表
          this.search()
        })
      })
    },


    // 查询列表
    search() {
      if(this.name.trim()==''){
        this.listMovies() // 查询所有电影
      }else {
        this.listMoviesByName()
      }
    },

    /** 模糊查询电影列表 */
    listMoviesByName(){
      let params = {
        name: this.name.trim(), 
        page: this.moviesData.page, 
        pagesize: this.moviesData.pagesize
      }
      httpApi.MovieApi.queryAllByNameLike(params).then(res=>{
        this.moviesData = res.data.data
      })
    },

    /** 当分页器当前页改变时执行 */
    changeCurrentPage(page){
      console.log(page)
      this.moviesData.page = page // 修改当前页码后，查询电影列表
      this.search()
    },

    /** 发送请求 加载电影列表 */ 
    listMovies(){
      let params = {
        page: this.moviesData.page, 
        pagesize: this.moviesData.pagesize
      }
      httpApi.MovieApi.queryAll(params).then(res=>{
        console.log('加载电影列表', res)
        this.moviesData = res.data.data
      })
    }

  },

  mounted(){
    // 初始化加载电影列表 首页，每页3条
    this.listMovies()
  }
};
</script>

<style lang="scss" scoped></style>
